import { createApp } from "vue";
import Person from "./Person.vue";

// import { userInfo } from "@/data/mockData";
import { getElement } from '@/content-scripts/getElement.js'

export function createPerson() {
  removeBeginner()

  const container = getElement("person.container")[0]
  // document.querySelector(".sc-8ffb102a-0");
  if (!container || container.querySelector(".my-user-info-overlay")) return;

  const overlay = document.createElement("div");
  overlay.setAttribute("class", "my-user-info-overlay");
  overlay.setAttribute(
    "style",
    "position: absolute;\n" +
    " left: 0;\n" +
    " top: 0;\n" +
    " z-index: 1;\n" +
    " width: 100%;\n" +
    " height: 100%;"
  );

  // 创建一个用于挂载 Vue 应用的子元素
  const appContainer = document.createElement("div");

  const person = createApp(Person); // 创建 Vue 应用
  person.mount(appContainer); // 将 Vue 应用挂载到子元素上
  console.log(222221111);

  container.style.position = "relative";
  overlay.appendChild(appContainer); // 将子元素添加到 overlay 中
  container.appendChild(overlay); // 将 overlay 添加到 container 中

  console.log("First App mounted");

}

// 去除新手指引
function removeBeginner() {
  const container = getElement("person.beginner")[0]
  // document.querySelector('.gFszsJ')
  if (container) {
    container.remove()
  }
  const bottomContainer = getElement("person.beginner.bottom")[0]
  // document.querySelector('.AjGcW')
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  console.log('最终宽度:', width);

  if (bottomContainer && width > 992) {
    bottomContainer.setAttribute(
      "style",
      "position: relative;\n" +
      "top: -262px;"
    );
  } else {
    if (bottomContainer) {
      bottomContainer.setAttribute(
        "style",
        "position: static;\n" +
        "top: 0;"
      );
    }

  }
}

// 窗口宽度变化监听器
let lastWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let resizeTimeout = null;

function initWidthWatcher() {
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    const currentWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 防抖：避免频繁执行
    if (resizeTimeout) {
      clearTimeout(resizeTimeout);
    }

    resizeTimeout = setTimeout(() => {
      if (currentWidth !== lastWidth) {
        console.log('窗口宽度变化:', lastWidth, '->', currentWidth);
        lastWidth = currentWidth;
        removeBeginner();
        createTopInfo()
      }
    }, 300); // 300ms防抖
  });

  console.log('宽度监听器已初始化，当前宽度:', lastWidth);
}

// 初始化宽度监听器
initWidthWatcher();



export function createTopAvatar() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))

  // const firstContainer = document.querySelectorAll('.dzylUi')
  // const secondContainer = document.querySelectorAll(".my-avatar");
  // const thirdContainer = document.querySelectorAll('.iuOKf')
  // const fourContainer = document.querySelectorAll(".PQjtD")
  // const fiveContainer = document.querySelectorAll('.fbxVZq')
  // const sixContainer = document.querySelectorAll('.nav-container-user-left')
  // const sevenContainer = document.querySelectorAll('.gDyWdX')
  const container = getElement("header.avatar")
  console.log(container, "containerheader.avatarheader.avatarheader.avatar");
  
  // [...firstContainer, ...sixContainer, ...secondContainer, ...thirdContainer, ...fiveContainer, ...fourContainer, ...sevenContainer];

  if (container.length != 0) {
    for (let i = 0; i < container.length; i++) {
      if (container[i].querySelector(`.my-top-avatar-overlay-${i}`)) continue;
      const overlay = document.createElement("img");
      overlay.setAttribute("class", `my-top-avatar-overlay-${i}`);
      overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        " left: 0;\n" +
        " top: 0;\n" +
        " width: 100%;\n" +
        " height: 100%;\n" +
        " z-index: 5;"
      );
      console.log(userInfo.avatar, 'userInfo.avataruserInfo.avataruserInfo.avatar');

      overlay.setAttribute("src", userInfo.avatar);
      container[i].style.position = "relative";
      container[i].appendChild(overlay);
    }
  }
}


import { language } from "@/content-scripts/locales";

export function createTopInfo() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  // 修改email
  // const firstEmailContainer = document.querySelectorAll(".iNVHYx");
  // const secondEmailContainer = document.querySelectorAll(".text-truncate");
  // const thirdEmailContainer = document.querySelectorAll('.iXUXyg')
  

  const container = getElement("header.email")
  // [...firstEmailContainer, ...secondEmailContainer, ...thirdEmailContainer];
  if (container.length != 0) {
    for (let i = 0; i < container.length; i++) {
      if (container[i].querySelector(`.my-top-email-overlay-${i}`)) continue;
      const overlay = document.createElement("div");
      overlay.setAttribute("class", `my-top-email-overlay-${i}`);
      overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        "left: 0;\n" +
        "top: 0;\n" +
        "width: 100%;\n" +
        "height: 100%;\n" +
        "z-index: 9999;\n" +
        "background-color: #fff;\n"
      );
      overlay.innerHTML = userInfo.hideName;
      container[i].style.position = "relative";
      container[i].appendChild(overlay);
    }
  }

  // 修改名称
  // const firstNameContainer = document.querySelectorAll(".cLUqoo");
  // const secondNameContainer = document.querySelectorAll(".pull-left-user");
  // const thirdNameContainer = document.querySelectorAll('.cPmlCF')
  // const fourthNameContainer = document.querySelectorAll('.hDSGMf')
  // const fifthNameContainer = document.querySelectorAll('.hDSGKO')
  // const sixthNameContainer = document.querySelectorAll('.bOCmaL')
  // const seventhNameContainer = document.querySelectorAll('.kjGUJV')
  // const eightNameContainer = document.querySelectorAll('.jBBkmk')
  const nameContainer = getElement("header.name")
  // [...firstNameContainer, ...sixthNameContainer, ...secondNameContainer, ...thirdNameContainer, ...fourthNameContainer, ...fifthNameContainer, ...seventhNameContainer, ...eightNameContainer];

  if (nameContainer.length != 0) {
    for (let i = 0; i < nameContainer.length; i++) {
      if (nameContainer[i].querySelector(`.my-top-name-overlay-${i}`)) continue;
      const overlay = document.createElement("div");
      overlay.setAttribute("class", `my-top-name-overlay-${i}`);
      overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        "left: 0;\n" +
        "top: 0;\n" +
        "width: 100%;\n" +
        "height: 100%;\n" +
        "z-index: 9999;\n" +
        "background-color: #fff;\n"
      );
      overlay.innerHTML = userInfo[language.username]
      nameContainer[i].style.position = "relative";
      nameContainer[i].appendChild(overlay);
    }
  }

  // 修改UID  sc-41720247-10 coAniP
  // const firstUidContainer = document.querySelectorAll(".coAniP");
  // const secondUidContainer = document.querySelectorAll(".l-uid > span");
  // const thirdUidContainer = document.querySelectorAll('.hYYETC')
  // const fourthUidContainer = document.querySelectorAll('.fJLvpP')
  // const fifthUidContainer = document.querySelectorAll('.eXZHtw')
  // const sixthUidContainer = document.querySelectorAll('.nav-container-user-right-bottom > .nav-user-uid')
  // const seventhUidContainer = document.querySelectorAll('.bxxQve')
  // const eightUidContainer = document.querySelectorAll('.dthlZn')
  const uidContainer = getElement("header.uid")
  // [...firstUidContainer, ...seventhUidContainer, ...sixthUidContainer, ...fifthUidContainer, ...secondUidContainer, ...thirdUidContainer, ...fourthUidContainer, ...eightUidContainer];
  // console.log(uidContainer, secondUidContainer, "secooooooooooooooooooond uid");

  if (uidContainer.length != 0) {
    for (let i = 0; i < uidContainer.length; i++) {
      if (uidContainer[i].querySelector(`.my-top-uid-overlay-${i}`)) continue;
      const overlay = document.createElement("div");
      overlay.setAttribute("class", `my-top-uid-overlay-${i}`);
      overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        "left: 0;\n" +
        "top: 0;\n" +
        "width: 100%;\n" +
        "height: 100%;\n" +
        "z-index: 9999;\n" +
        "background-color: #fff;\n"
      );
      overlay.innerHTML = "UID: " + userInfo.uident;
      uidContainer[i].style.position = "relative";
      uidContainer[i].appendChild(overlay);
    }
  }

  // 修改进30天交易量，总资产
  const assetContainer = getElement("header.asset")
  // [...document.querySelectorAll('.cyvRnf'), ...document.querySelectorAll(".klLunC")
  //   , ...document.querySelectorAll('.bTUvHt'), ...document.querySelectorAll('.gmtYWq'), ...document.querySelectorAll('.eTNVMU')
  //   , ...document.querySelectorAll('.igDzbu'), ...document.querySelectorAll('.dbGBWz')
  // ];
  console.log(assetContainer, "wwwwwwweeeeeeee");
  if (assetContainer.length != 0) {
    for (let i = 0; i < assetContainer.length; i++) {
      if (i % 2 == 0) {
        if (!document.querySelector(".my-top-volume-overlay")) {
          const volumeOverlay = document.createElement("div");
          volumeOverlay.setAttribute("class", "my-top-volume-overlay");
          volumeOverlay.setAttribute(
            "style",
            "position: absolute;\n" +
            "left: -10px;\n" +
            "top: 0;\n" +
            "width: 100%;\n" +
            "height: 100%;\n" +
            "z-index: 9999;\n" +
            "background-color: #fff;\n"
          );
          volumeOverlay.innerHTML = userInfo.oneMonthProfit.monthProfit;
          // assetContainer[i].style.position = "relative";
          // assetContainer[i].appendChild(volumeOverlay);
          assetContainer[i].innerHTML = Number(userInfo.oneMonthProfit.monthProfit).toFixed(2)
        }
      } else {
        if (!document.querySelector(".my-top-asset-overlay")) {
          const assetOverlay = document.createElement("div");
          assetOverlay.setAttribute("class", "my-top-asset-overlay");
          assetOverlay.setAttribute(
            "style",
            "position: absolute;\n" +
            "left: 0;\n" +
            "top: 0;\n" +
            "width: 100px;\n" +
            "height: 100%;\n" +
            "z-index: 9999;\n" +
            "background-color: #fff;\n"
          );
          assetOverlay.innerHTML = userInfo.asset;
          // assetContainer[i].style.position = "relative";
          // assetContainer[i].appendChild(assetOverlay);
          assetContainer[i].innerHTML = Number(userInfo.asset).toFixed(2)
        }
      }
    }


  }

  const secondVolumeContainer = getElement("small.volume")[0]
    // document.querySelector(
    //   ".tier_all_trade_usdt_value"
    // );
  console.log(secondVolumeContainer, 'secondVolumeContainersecondVolumeContainersecondVolumeContainer');
  // nav-container-assets
  if (secondVolumeContainer) {
    if (!secondVolumeContainer.querySelector(".my-second-volume-overlay")) {
      const secVolumeOverlay = document.createElement("div");
      secVolumeOverlay.setAttribute("class", "my-second-volume-overlay");
      secVolumeOverlay.setAttribute(
        "style",
        "position: absolute;\n" +
        "left: 0;\n" +
        "top: 0;\n" +
        "width: 100%;\n" +
        "height: 100%;\n" +
        "z-index: 9999;\n" +
        "background-color: #fff;\n"
      );
      secVolumeOverlay.innerHTML = userInfo.oneMonthProfit.monthProfit;
      secondVolumeContainer.innerHTML = Number(userInfo.oneMonthProfit.monthProfit).toFixed(2)
      console.log(secondVolumeContainer);
      console.log(Number(userInfo.oneMonthProfit.monthProfit).toFixed(2));


    }
  }

  const secondAssetContainer = getElement("small.asset")[0]
    // document.querySelector(
    //   ".my_funds_sum_usd_value"
    // );
  console.log(secondAssetContainer, 'secondAssetContainersecondAssetContainer');

  if (secondAssetContainer) {
    if (!secondAssetContainer.querySelector(".my-second-asset-overlay")) {
      const secAssetOverlay = document.createElement("div");
      secAssetOverlay.setAttribute("class", "my-second-asset-overlay");
      secAssetOverlay.setAttribute(
        "style",
        "position: absolute;\n" +
        "left: 0;\n" +
        "top: 0;\n" +
        "width: 100%;\n" +
        "height: 100%;\n" +
        "z-index: 9999;\n" +
        "background-color: #fff;\n"
      );
      secAssetOverlay.innerHTML = userInfo.asset;
      secondAssetContainer.innerHTML = Number(userInfo.asset).toFixed(2)
      console.log(secondAssetContainer);
      console.log(Number(userInfo.asset).toFixed(2));

    }
  }

  const currentUrl = window.location.href
  if (currentUrl.includes('https://www.gate.com/zh/myaccount/security-setting') || currentUrl.includes('https://www.gate.com/myaccount/security-setting')) {
    const emailSettingCon = document.querySelectorAll('.mantine-6dgxgz');

    // console.log(emailSettingCon.innerHTML);
    emailSettingCon[2].innerHTML = userInfo.hideName
  }




}
